/**
 * title: 加入公司
 */
import React, { Component } from 'react';
import { Form, Input, Button, message, Spin } from 'antd';
import { SearchSelect } from 'scd';
import { connect } from 'dva';
import styles from './join.less';
import Link from 'umi/link';
const { TextArea } = Input;
const FormItem = Form.Item;

@connect(({ loading: { models: { joinCompany } } }) => ({
  loading: !!joinCompany,
}))
@Form.create()
class Join extends Component {
  state = {
    selected: false,
  };
  handleSubmit = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // console.log('Received values of form: ', values);
        dispatch({
          type: 'joinCompany/joinCompany',
          // applyFlag:1 申请加入
          payload: { ...values, applyFlag: 1 },
        })
          .then(() => {
            message.success('已发送加入申请');
            window.location.href = '/myCompany/#/myCompany';
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };

  onChange = value => {
    this.setState({
      selected: true,
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      loading,
    } = this.props;
    const { selected } = this.state;
    return (
      <div className={styles.wrapper}>
        <Spin spinning={loading}>
          <Form className={styles.content} onSubmit={this.handleSubmit} style={{ width: 600 }}>
            <h2>搜索您要加入或创建的公司</h2>
            <FormItem>
              {getFieldDecorator('orgId', {
                // initialValue: '1',
                rules: [
                  {
                    required: true,
                    message: '请输入公司名称',
                  },
                ],
              })(
                <SearchSelect
                  style={{ width: 480 }}
                  textFieldName="name"
                  valueFieldName="id"
                  queryFieldName="companyName"
                  notFoundContent="找不到该公司"
                  onChange={this.onChange}
                  url="/ms/api/v1/uc/company/queryLikeName"
                />
              )}
            </FormItem>
            <div style={{ marginBottom: 20 }}>
              找不到该企业? <Link to="/createCompany">创建公司</Link>
            </div>
            {selected && (
              <>
                <FormItem>
                  {getFieldDecorator('deptRemark', {
                    rules: [],
                  })(<Input placeholder="加入的部门(非必填)" />)}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('remark', {
                    rules: [
                      {
                        required: true,
                        message: '请输入备注',
                      },
                      {
                        max: 255,
                        message: '255个字符以内',
                      },
                    ],
                  })(
                    <TextArea
                      rows={4}
                      placeholder="
          申请原因：输入申请加入企业的原因，提交给企业管理员审核"
                    />
                  )}
                </FormItem>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </>
            )}
          </Form>
        </Spin>
      </div>
    );
  }
}
export default Join;
